<script setup lang="ts">
import { toNumber } from 'lodash-es'
import dayjs from 'dayjs'
import { useUserStore } from '@/store/modules'
import { userModify } from '@/api/user'
const { userInfo, getUserInfo } = useUserStore()
const form = ref({
  avatarId: '',
})
// 转换店铺评分
function rateNum(rate_count: string): number {
  const rate = toNumber(rate_count.replace('%', ''))
  return toNumber((rate / 20).toFixed(2)) // 20% === 评分组件的1
}
// 头像上传后回调
async function avatarUploadChange(avatar: string | number) {
  if (!avatar) { // 头像禁止删除只能更换
    return
  }
  const { code, msg } = await userModify({ avatar })
  if (code === 0) {
    window.$message?.success(msg)
    getUserInfo()
  }
}
</script>

<template>
  <div f-col-c-c>
    <CuploadImage
      v-model:imageIds="form.avatarId"
      :default-file-list="userInfo.avatar"
      :max="1"
      width="200px"
      height="200px"
      round
      class="user-avatarCard-upload"
      @update:image-ids="avatarUploadChange"
    />
    <div mt-20 text-18 font-bold>
      {{ userInfo.userName || '未命名店铺' }}
    </div>
    <div mt-20 text-14 color-secondary>
      {{ userInfo.descText || '未填写简介' }}
    </div>
  </div>
  <div h-30 />
  <n-grid cols="24" mb-10>
    <n-grid-item offset="3" span="7" font-bold>
      店铺评分：
    </n-grid-item>
    <n-grid-item span="14">
      <n-rate :value="rateNum(userInfo.rate_count)" allow-half readonly />
    </n-grid-item>
  </n-grid>
  <n-grid cols="24" mb-10>
    <n-grid-item offset="3" span="7" font-bold>
      联系手机号：
    </n-grid-item>
    <n-grid-item span="14" color-secondary>
      {{ userInfo.phone }}
    </n-grid-item>
  </n-grid>
  <n-grid cols="24" mb-10>
    <n-grid-item offset="3" span="7" font-bold>
      店铺地址：
    </n-grid-item>
    <n-grid-item span="14" color-secondary>
      <span v-if="userInfo.province && userInfo.city && userInfo.county">{{ userInfo.province + userInfo.city + userInfo.county + userInfo.addressDetail }}</span>
      <span v-else>未填写地址</span>
    </n-grid-item>
  </n-grid>
  <n-grid cols="24" mb-10>
    <n-grid-item offset="3" span="7" font-bold>
      注册时间：
    </n-grid-item>
    <n-grid-item span="14" color-secondary>
      {{ dayjs(userInfo.createTime).format('YYYY-MM-DD HH:mm:ss') }}
    </n-grid-item>
  </n-grid>
  <n-grid cols="24" mb-10>
    <n-grid-item offset="3" span="7" font-bold>
      最后登陆时间：
    </n-grid-item>
    <n-grid-item span="14" color-secondary>
      {{ dayjs(userInfo.lastLoginTime).format('YYYY-MM-DD HH:mm:ss') }}
    </n-grid-item>
  </n-grid>
</template>

<style lang="scss" scoped>
.user-avatarCard-upload {
  :deep(.n-upload-file-list.n-upload-file-list--grid) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
